React Portals: Bemästra modaler och tooltips för en förbättrad användarupplevelse

Inom modern webbutveckling är det av yttersta vikt att skapa intuitiva och engagerande användargränssnitt. React, ett populärt JavaScript-bibliotek för att bygga användargränssnitt, erbjuder olika verktyg och tekniker för att uppnå detta. Ett sådant kraftfullt verktyg är React Portals. Detta blogginlägg fördjupar sig i världen av React Portals, med fokus på deras tillämpning för att bygga tillgängliga och visuellt tilltalande modaler och tooltips.

Vad är React Portals?

React Portals erbjuder ett sätt att rendera en komponents barn till en DOM-nod som existerar utanför föräldra-komponentens DOM-hierarki. Enkelt uttryckt låter det dig bryta dig loss från det vanliga React-komponentträdet och infoga element direkt i en annan del av HTML-strukturen. Detta är särskilt användbart i situationer där du behöver kontrollera stacking context eller positionera element utanför deras föräldracontainers gränser.

Traditionellt sett renderas React-komponenter som barn till sina föräldrakomponenter inom DOM. Detta kan ibland leda till stil- och layoututmaningar, särskilt när man hanterar element som modaler eller tooltips som behöver visas ovanpå annat innehåll eller positioneras i förhållande till visningsområdet. React Portals erbjuder en lösning genom att låta dessa element renderas direkt i en annan del av DOM-trädet, och därmed kringgå dessa begränsningar.

Varför använda React Portals?

Flera viktiga fördelar gör React Portals till ett värdefullt verktyg i din React-utvecklingsarsenal:

• Förbättrad styling och layout: Portaler låter dig positionera element utanför deras föräldracontainer, vilket övervinner stilproblem orsakade av overflow: hidden, z-index-begränsningar eller komplexa layoutrestriktioner. Föreställ dig en modal som behöver täcka hela skärmen, även om dess föräldracontainer har overflow: hidden inställt. Portaler låter dig rendera modalen direkt i body, och kringgår därmed denna begränsning.
• Förbättrad tillgänglighet: Portaler är avgörande för tillgänglighet, särskilt när man hanterar modaler. Genom att rendera modalens innehåll direkt i body kan du enkelt hantera focus trapping, vilket säkerställer att användare med skärmläsare eller tangentbordsnavigering stannar kvar i modalen medan den är öppen. Detta är avgörande för att erbjuda en sömlös och tillgänglig användarupplevelse.
• Renare komponentstruktur: Genom att rendera innehållet för modaler eller tooltips utanför huvudkomponentträdet kan du hålla din komponentstruktur renare och mer hanterbar. Denna uppdelning av ansvarsområden kan göra din kod lättare att läsa, förstå och underhålla.
• Undvika problem med stacking context: Stacking contexts i CSS kan vara notoriskt svåra att hantera. Portaler hjälper dig att undvika dessa problem genom att låta dig rendera element direkt i roten av DOM, vilket säkerställer att de alltid är korrekt positionerade i förhållande till andra element på sidan.

Implementera modaler med React Portals

Modaler är ett vanligt UI-mönster som används för att visa viktig information eller be användare om input. Låt oss utforska hur man skapar en modal med hjälp av React Portals.

1. Skapa portalroten

Först måste du skapa en DOM-nod där modalen ska renderas. Detta görs vanligtvis genom att lägga till ett div-element med ett specifikt ID i din HTML-fil (vanligtvis i body):

            <div id="modal-root"></div>
            

              
                Copy
              
            
          

2. Skapa modalkomponenten

Skapa sedan en React-komponent som representerar modalen. Denna komponent kommer att innehålla modalens innehåll och logik.

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Stäng</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Förklaring:

• isOpen prop: Bestämmer om modalen är synlig.
• onClose prop: En funktion för att stänga modalen.
• children prop: Innehållet som ska visas inuti modalen.
• modalRoot ref: Refererar till DOM-noden där modalen kommer att renderas (#modal-root).
• useEffect hook: Säkerställer att modalen endast renderas efter att komponenten har monterats för att undvika problem med att portalroten inte är tillgänglig omedelbart.
• ReactDOM.createPortal: Detta är nyckeln till att använda React Portals. Den tar två argument: React-elementet som ska renderas (modalContent) och DOM-noden där det ska renderas (modalRoot.current).
• Klicka på overlayen: Stänger modalen. Vi använder e.stopPropagation() på modal-content-diven för att förhindra att klick inuti modalen stänger den.

3. Använda modalkomponenten

Nu kan du använda Modal-komponenten i din applikation:

            import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div>
      <button onClick={openModal}>Öppna modal</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modalinnehåll</h2>
        <p>Detta är innehållet i modalen.</p>
      </Modal>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Detta exempel visar hur man kontrollerar modalens synlighet med hjälp av isOpen-propen och funktionerna openModal och closeModal. Innehållet inom <Modal>-taggarna kommer att renderas inuti modalen.

4. Styla modalen

Lägg till CSS-stilar för att positionera och styla modalen. Här är ett grundläggande exempel:

            .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Halvtransparent bakgrund */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Säkerställ att den ligger ovanpå annat innehåll */
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

            

              
                Copy
              
            
          

Förklaring av CSS:

• position: fixed: Säkerställer att modalen täcker hela visningsområdet, oavsett scrollning.
• background-color: rgba(0, 0, 0, 0.5): Skapar en halvtransparent overlay bakom modalen.
• display: flex, justify-content: center, align-items: center: Centrerar modalen horisontellt och vertikalt.
• z-index: 1000: Säkerställer att modalen renderas ovanpå alla andra element på sidan.

5. Tillgänglighetsaspekter för modaler

Tillgänglighet är avgörande när man implementerar modaler. Här är några viktiga överväganden:

• Fokushantering: När modalen öppnas ska fokus automatiskt flyttas till ett element inuti modalen (t.ex. det första inmatningsfältet eller en stängningsknapp). När modalen stängs ska fokus återgå till elementet som utlöste modalens öppning. Detta uppnås ofta med hjälp av Reacts useRef-hook för att lagra det tidigare fokuserade elementet.
• Tangentbordsnavigering: Säkerställ att användare kan navigera i modalen med tangentbordet (Tab-tangenten). Fokus bör vara fångat inuti modalen, vilket förhindrar användare från att oavsiktligt tabba ut ur den. Bibliotek som react-focus-lock kan hjälpa till med detta.
• ARIA-attribut: Använd ARIA-attribut för att ge semantisk information om modalen till skärmläsare. Använd till exempel aria-modal="true" på modalcontainern och aria-label eller aria-labelledby för att ge en beskrivande etikett för modalen.
• Stängningsmekanism: Tillhandahåll flera sätt att stänga modalen, som en stängningsknapp, att klicka på overlayen eller att trycka på Escape-tangenten.

Exempel på fokushantering (med useRef):

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose, children }) => {
  const [mounted, setMounted] = useState(false);
  const modalRoot = useRef(document.getElementById('modal-root'));
  const firstFocusableElement = useRef(null);
  const previouslyFocusedElement = useRef(null);

  useEffect(() => {
    setMounted(true);
    if (isOpen) {
      previouslyFocusedElement.current = document.activeElement;
      if (firstFocusableElement.current) {
        firstFocusableElement.current.focus();
      }

      const handleKeyDown = (event) => {
        if (event.key === 'Escape') {
          onClose();
        }
      };

      document.addEventListener('keydown', handleKeyDown);

      return () => {
        document.removeEventListener('keydown', handleKeyDown);
        if (previouslyFocusedElement.current) {
          previouslyFocusedElement.current.focus();
        }
      };
    }

    return () => setMounted(false);
  }, [isOpen, onClose]);


  if (!isOpen) return null;

  const modalContent = (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <h2>Modalinnehåll</h2>
        <p>Detta är innehållet i modalen.</p>
        <input type="text" ref={firstFocusableElement} /> <!-- Första fokuserbara elementet -->
        <button onClick={onClose}>Stäng</button>
      </div>
    </div>
  );

  return mounted && modalRoot.current
    ? ReactDOM.createPortal(modalContent, modalRoot.current)
    : null;
};

export default Modal;

            

              
                Copy
              
            
          

Förklaring av koden för fokushantering:

• previouslyFocusedElement.current: Lagrar elementet som hade fokus innan modalen öppnades.
• firstFocusableElement.current: Refererar till det första fokuserbara elementet *inuti* modalen (i detta exempel, ett textinmatningsfält).
• När modalen öppnas (isOpen är true):
  • Det för närvarande fokuserade elementet lagras.
  • Fokus flyttas till firstFocusableElement.current.
  • En händelselyssnare läggs till för att lyssna efter Escape-tangenten, vilket stänger modalen.
• När modalen stängs (uppstädningsfunktion):
  • Händelselyssnaren för Escape-tangenten tas bort.
  • Fokus återgår till elementet som tidigare var fokuserat.

Implementera tooltips med React Portals

Tooltips är små, informativa popups som visas när en användare för muspekaren över ett element. React Portals kan användas för att skapa tooltips som är korrekt positionerade, oavsett föräldraelementets styling eller layout.

1. Skapa portalroten (om den inte redan är skapad)

Om du inte redan har skapat en portalrot för modaler, lägg till ett div-element med ett specifikt ID i din HTML-fil (vanligtvis i body):

            <div id="tooltip-root"></div>
            

              
                Copy
              
            
          

2. Skapa tooltip-komponenten

            import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const Tooltip = ({ text, children, position = 'top' }) => {
  const [isVisible, setIsVisible] = useState(false);
  const [positionStyle, setPositionStyle] = useState({});
  const [mounted, setMounted] = useState(false);

  const tooltipRoot = useRef(document.getElementById('tooltip-root'));
  const tooltipRef = useRef(null);
  const triggerRef = useRef(null);

  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);

  const handleMouseEnter = () => {
    setIsVisible(true);
    updatePosition();
  };

  const handleMouseLeave = () => {
    setIsVisible(false);
  };

  const updatePosition = () => {
    if (!triggerRef.current || !tooltipRef.current) return;

    const triggerRect = triggerRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    let top = 0;
    let left = 0;

    switch (position) {
      case 'top':
        top = triggerRect.top - tooltipRect.height - 5; // 5px spacing
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'bottom':
        top = triggerRect.bottom + 5;
        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
        break;
      case 'left':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.left - tooltipRect.width - 5;
        break;
      case 'right':
        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
        left = triggerRect.right + 5;
        break;
      default:
        break;
    }

    setPositionStyle({
      top: `${top}px`,
      left: `${left}px`,
    });
  };

  const tooltipContent = isVisible && (
    <div className="tooltip" style={positionStyle} ref={tooltipRef}>
      {text}
    </div>
  );

  return (
    <span
      ref={triggerRef}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      {children}
      {mounted && tooltipRoot.current ? ReactDOM.createPortal(tooltipContent, tooltipRoot.current) : null}
    </span>
  );
};

export default Tooltip;

            

              
                Copy
              
            
          

Förklaring:

• text prop: Texten som ska visas i tooltipen.
• children prop: Elementet som utlöser tooltipen (det element som användaren för muspekaren över).
• position prop: Positionen för tooltipen i förhållande till utlösarelementet ('top', 'bottom', 'left', 'right'). Standardvärdet är 'top'.
• isVisible state: Kontrollerar synligheten för tooltipen.
• tooltipRoot ref: Refererar till DOM-noden där tooltipen kommer att renderas (#tooltip-root).
• tooltipRef ref: Refererar till själva tooltip-elementet, används för att beräkna dess dimensioner.
• triggerRef ref: Refererar till elementet som utlöser tooltipen (children).
• handleMouseEnter och handleMouseLeave: Händelsehanterare för när muspekaren förs över utlösarelementet.
• updatePosition: Beräknar den korrekta positionen för tooltipen baserat på position-propen och dimensionerna för utlösar- och tooltip-elementen. Den använder getBoundingClientRect() för att hämta position och dimensioner för elementen i förhållande till visningsområdet.
• ReactDOM.createPortal: Renderar tooltip-innehållet i tooltipRoot.

3. Använda tooltip-komponenten

            import React from 'react';
import Tooltip from './Tooltip';

const App = () => {
  return (
    <div>
      <p>
        Håll muspekaren över denna <Tooltip text="Detta är en tooltip!\nMed flera rader." position="bottom">text</Tooltip> för att se en tooltip.
      </p>

      <button>
        Håll muspekaren <Tooltip text="Knapp-tooltip" position="top">här</Tooltip> för en tooltip.
      </button>
    </div>
  );
};

export default App;

            

              
                Copy
              
            
          

Detta exempel visar hur man använder Tooltip-komponenten för att lägga till tooltips till text och knappar. Du kan anpassa tooltipens text och position med hjälp av text- och position-proparna.

4. Styla tooltipen

Lägg till CSS-stilar för att positionera och styla tooltipen. Här är ett grundläggande exempel:

            .tooltip {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8); /* Mörk bakgrund */
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 12px;
  z-index: 1000; /* Säkerställ att den ligger ovanpå annat innehåll */
  white-space: pre-line; /* Respektera radbrytningar i text-propen */
}

            

              
                Copy
              
            
          

Förklaring av CSS:

• position: absolute: Positionerar tooltipen i förhållande till tooltip-root. Funktionen updatePosition i React-komponenten beräknar de exakta top- och left-värdena för att positionera tooltipen nära utlösarelementet.
• background-color: rgba(0, 0, 0, 0.8): Skapar en lätt transparent mörk bakgrund för tooltipen.
• white-space: pre-line: Detta är viktigt för att bevara radbrytningar som du kan inkludera i text-propen. Utan detta skulle all tooltip-text visas på en enda rad.

Globala överväganden och bästa praxis

När du utvecklar React-applikationer för en global publik, överväg dessa bästa praxis:

• Internationalisering (i18n): Använd ett bibliotek som react-i18next eller FormatJS för att hantera översättningar och lokalisering. Detta gör att du enkelt kan anpassa din applikation till olika språk och regioner. För modaler och tooltips, se till att textinnehållet är korrekt översatt.
• Höger-till-vänster (RTL) stöd: För språk som läses från höger till vänster (t.ex. arabiska, hebreiska), se till att dina modaler och tooltips visas korrekt. Du kan behöva justera positionering och styling av element för att anpassa dem till RTL-layouter. CSS logiska egenskaper (t.ex. margin-inline-start istället för margin-left) kan vara till hjälp.
• Kulturell känslighet: Var medveten om kulturella skillnader när du designar dina modaler och tooltips. Undvik att använda bilder eller symboler som kan vara stötande eller olämpliga i vissa kulturer.
• Tidszoner och datumformat: Om dina modaler eller tooltips visar datum eller tider, se till att de är formaterade enligt användarens lokala inställningar och tidszon. Bibliotek som moment.js (även om det är äldre, fortfarande flitigt använt) eller date-fns kan hjälpa till med detta.
• Tillgänglighet för olika förmågor: Följ tillgänglighetsriktlinjer (WCAG) för att säkerställa att dina modaler och tooltips är användbara för personer med funktionsnedsättningar. Detta inkluderar att tillhandahålla alternativ text för bilder, säkerställa tillräcklig färgkontrast och ge stöd för tangentbordsnavigering.

Slutsats

React Portals är ett kraftfullt verktyg för att bygga flexibla och tillgängliga användargränssnitt. Genom att förstå hur man använder dem effektivt kan du skapa modaler och tooltips som förbättrar användarupplevelsen och förbättrar strukturen och underhållbarheten i dina React-applikationer. Kom ihåg att prioritera tillgänglighet och globala överväganden när du utvecklar för en mångfaldig publik, för att säkerställa att dina applikationer är inkluderande och användbara för alla.

Vidare lärande

• React Portals Dokumentation
• Web Content Accessibility Guidelines (WCAG)
• react-i18next